<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/header'}
<script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>
<style>
    .layui-form-label {
        width: 120px;
    }

    .layui-input-block {
        margin-left: 150px;
    }

    .juset {
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    .back_rate_type2 {
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    .layui-input-block {
        margin-left: 165px;
    }

    #selectAccount .layui-input-block {
        margin-left: 0;
    }

    .designated_amount_echo {
        width: 50%;
    }

    .designated_amount_echo .item {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        height: 38px;
        width: 400px;
    }

    .designated_amount_echo .item div {
        display: flex;
        align-items: center;
    }

    .designated_amount_echo .item .content div {
        margin-right: 10px;
    }

    .designated_amount_echo .item input {
        flex: 1;
        width: 75px;
        height: 30px;
    }

    .designated_amount_echo .item .operate span {
        margin-right: 15px;
        display: inline-block;
        width: 20px;
        height: 20px;
        padding: 0;
        line-height: 20px;
    }

    .layui-form-label {
        width: 135px;
    }

    .fairy-tag {
        display: flex;
    }

    .fairy-tag-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
</style>

<body>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>模板名称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" placeholder="名称" required="required" lay-verify="required"
                        autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>回传方式
                </label>
                <div class="layui-input-block">
                    <!-- <input type="radio" name="type" value="1" title="有效获客"> -->
                    <input type="radio" name="type" value="0" title="按公共配置充值（T+7全量）" checked>
                    <input type="radio" name="type" value="1" title="按自然日配置回传">
                    <input type="radio" name="type" value="2" title="仅回传首单（T+7全量）">
                </div>
            </div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>回传订单比例
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="back_rate_type" value="0" title="百分比例" checked>
                    <input type="radio" name="back_rate_type" value="1" title="循环比例">
                </div>
               
            </div> -->
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>回传订单比例
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="back_rate_type" lay-filter="back_rate_type" value="0" title="百分比例"
                        checked>
                    <input type="radio" name="back_rate_type" lay-filter="back_rate_type" value="1" title="循环比例">
                </div>
                <div class="back_rate_type1">
                    <input type="number" name="echo_rate" style="width: 80px;" class="layui-input payamount"
                        onblur="validateInput(this)" />
                </div>
                <div style="display: none;" class="back_rate_type2">
                    <div style="display: flex;align-items: center;">
                       (回传单数) <input type="number" name="pass" style="width: 80px;" class="layui-input pass"
                        onblur="validateInput(this)" />：(不回传单数)<input    type="number" name="leak" style="width: 80px;"
                            class="layui-input leak"  onblur="validateInput(this)" />
                    </div>
                </div>
            </div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>指定金额回传
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="design_switch" lay-filter="design_switch" value="0" title="开启" checked>
                    <input type="radio" name="design_switch" lay-filter="design_switch" value="1" title="关闭">
                </div>
                <div class="juset design_input" style="display: flex;">
                    金额： <input type="number" name="designated_amount_echo" style="width: 80px;" class="layui-input payamount" />
                </div>
            </div> -->

            <div class="layui-form-item" id="zhidhuichuan">
                <label class="layui-form-label">
                    指定金额回传<i class="layui-icon iconfont icon-lytishi1" id="tips"
                        style="margin-left:5px;font-size: 14px;"></i>
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="design_switch" value="0" lay-filter="design_switch" title="关闭" checked>
                    <input type="radio" name="design_switch" value="1" lay-filter="design_switch" title="开启">
                </div>
                <div class="layui-input-block designated_amount_echo" style="display: none;"></div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>低冲不会回传
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="is_open_low_recharge_not_echo" lay-filter="is_open_low_recharge_not_echo"
                        value="0" title="关闭" checked>
                    <input type="radio" name="is_open_low_recharge_not_echo" lay-filter="is_open_low_recharge_not_echo"
                        value="1" title="开启">
                </div>
                <div class="juset is_open" style="display: none;">
                    金额： <input type="number" onblur="validateInput(this)" name="not_echo_recharge_price"
                        style="width: 80px;" class="layui-input payamount" />
                </div>
            </div>

            <!-- <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>媒体
                </label>
                <div id="pMenu" style="width:100%;flex:1"></div>
            </div> -->

            <input type="hidden" name="id" id="id" value="" />
            <input type="hidden" name="designated_amount_echo" id="designated_amount_echo"
                lay-verify="designated_amount_echo">
            <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;" />

        </form>
    </div>
    <script>
        let params = {
            addUrl: '/cps/back/add',
            editUrl: '/cps/back/edit',
            detailUrl: '/cps/back/detail',
        }
        form_ajax(params)
        var designated_amount_echo,
            old_designated_amount_echo;

        layui.use('form', function () {
            var form = layui.form;

            form.verify({
                nums: [
                    /^([1-9][0-9]{0,1}|100)$/, '只能输入1-100的整数'
                ],

                designated_amount_echo: function (value, item) {
                    if (value && form.val("formAjax").design_switch == 1) {
                        let designated_amount_echo = JSON.parse(value);
                        let priceList = []
                        for (let index = 0; index < designated_amount_echo.length; index++) {
                            const element = designated_amount_echo[index];
                            if (element.price == '' || element.rate == '') {
                                return '指定金额回传的金额或回传率不能为空';
                            }
                            priceList.push(element.price);
                        }
                        // if (isRepeat(priceList))
                        //     return '指定金额回传存在金额一样的数据';



                    }

                }

            });

            form.on('submit(submitData)', function (data) {
                // console.log(data);
                // debugger
                var formData = data.field
                let not_echo_recharge_price = parseInt(formData.not_echo_recharge_price)
                let leak = parseInt(formData.leak)
                let pass = parseInt(formData.pass)
                if (formData.back_rate_type == 0 && formData.echo_rate == '') {
                    layer.msg('回传订单比例不能为空')
                    return false
                } else if (formData.back_rate_type == 1 && formData.leak == '' && formData.pass == '' && leak < 0 && pass < 0) {
                    // if(){
                    layer.msg('循环比例不能为空,并且不能小于0')
                    return false
                } else if (formData.is_open_low_recharge_not_echo == 1 && formData.not_echo_recharge_price == '' || not_echo_recharge_price < 0) {
                    layer.msg('低冲不会回传不能为空,并且不能小于0')
                    return false
                } else {

                    if (id) {
                        formReloadAjax('/cps/back/edit', formData)
                    } else {
                        formReloadAjax('/cps/back/add', formData)
                    }

                    return false
                }
                return false
            });


            form.on('radio(back_rate_type)', function (data) {

                if (data.value == 1) {
                    $('.back_rate_type2').css('display', 'block');
                    $('.back_rate_type1').css('display', 'none');
                } else {
                    $('.back_rate_type1').css('display', 'block');
                    $('.back_rate_type2').css('display', 'none');
                }
            });

            form.on('radio(design_switch)', function (data) {
                $('.designated_amount_echo').css('display', data.value === '1' ? 'block' : 'none')
            });
            form.on('radio(is_open_low_recharge_not_echo)', function (data) {

                if (data.value == 0) {
                    $('.is_open').hide()
                } else {
                    $('.is_open').show()
                }
            });
        });

        function validateInput(input) {
           
            
            // 判断输入值不能为空
            if (input.value == "") {
                layer.msg('输入不能为空')

                return;
            }

            // 判断输入值不能为空
            if (parseInt(input.value) > 100) {
                layer.msg('不能输入100以上的数据！')
                input.value = ""
                return;
            }

            // 判断输入值不能小于0
            if (parseInt(input.value)  < 0) {
                layer.msg('请输入大于0的数字')
                input.value = ""
                return;
            }

        }

        let id = GetQueryString('id')
        if (id) {
            Ajax(params.detailUrl, { id }).then(result => {


                if (result.data.back_rate_type == 1) {
                    $('.back_rate_type2').show()
                    $('.back_rate_type1').hide()
                } else {
                    $('.back_rate_type1').show()
                    $('.back_rate_type2').hide()

                }

                if (result.data.is_open_low_recharge_not_echo == 0) {
                    $('.is_open').hide()
                } else {
                    $('.is_open').show()
                }

                if (result.data?.designated_amount_echo) {
                    if (typeof result.data.designated_amount_echo == 'string') {
                        designated_amount_echo = JSON.parse(result.data?.designated_amount_echo)
                        old_designated_amount_echo = JSON.parse(result.data?.designated_amount_echo)
                    } else {
                        designated_amount_echo = result.data?.designated_amount_echo
                        old_designated_amount_echo = result.data?.designated_amount_echo
                    }
                } else {
                    designated_amount_echo = [{
                        price: '',
                        rate: ''
                    }]
                    old_designated_amount_echo = [{
                        price: '',
                        rate: ''
                    }]
                }
                $('.designated_amount_echo').css('display', result.data.design_switch == 1 ? 'block' : 'none')
                setAmountEcho()
            });
        } else {
            designated_amount_echo = [{
                price: '',
                rate: ''
            }]
            setAmountEcho()
        }

        // 添加回传金额
        function addAmountEcho() {
            designated_amount_echo.push({ price: '', rate: '' })
            setAmountEcho()
        }
        // 删除回传金额
        function delAmountEcho(index) {
            designated_amount_echo.splice(index, 1)
            setAmountEcho()
        }

        // 修改回传
        function editAmountEcho(name, index, that) {
           
            designated_amount_echo[index][name] = $(that).val()
            if (parseInt(designated_amount_echo[index][name]) < 0) {
                layer.msg('请输入大于0的整数！')
                $(that).val('')
                return;
            }

            if (parseInt(designated_amount_echo[index][name]) > 100 && name != 'price') {
                layer.msg('不能输入100以上的数据！')
                $(that).val('')
                return;
            }

            if (id) { // 

                designated_amount_echo[index]['update_time'] = Math.round(new Date().getTime() / 1000)
                designated_amount_echo.forEach((item, index) => {
                    for (let ind = 0; ind < old_designated_amount_echo.length; ind++) {
                        const it = old_designated_amount_echo[ind];
                        if (Number(item.price) == Number(it.price) && Number(item.rate) == Number(it.rate)) {
                            designated_amount_echo[index]['update_time'] = old_designated_amount_echo[0]['update_time']
                            return;
                        } else {
                            designated_amount_echo[index]['update_time'] = Math.round(new Date().getTime() / 1000)
                        }
                    }
                })
            }
            $('#designated_amount_echo').val(JSON.stringify(designated_amount_echo))
        }

        function setAmountEcho() {
            let template = '';
            designated_amount_echo.forEach((item, index) => {
                let add = `<span class="layui-badge layui-bg-blue" onclick='addAmountEcho(${index})'>
                    <i class="layui-icon layui-icon-add-1"></i>
                </span>`
                let subtract = `<span class="layui-badge layui-bg-orange" onclick='delAmountEcho(${index})'>
                    <i class="layui-icon layui-icon-subtraction"></i>
                </span>`
                template += `
                    <div class="item">
                        <div class="content">
                            <div>金额：<input type="number" autocomplete="off" class="layui-input" value="${item.price
                    }" oninput="editAmountEcho('price',${index},this)" onchang="validateInput(${this})" onblur="editAmountEcho('price',${index},this)" /></div>
                            <div>回传率：<input type="number" autocomplete="off" class="layui-input" value="${item.rate
                    }" oninput="editAmountEcho('rate',${index},this)" onchang="validateInput(${this})" onblur="editAmountEcho('rate',${index},this)" /></div>
                        </div>

                        <div class="operate">
                            ${index == 0 ? '' : subtract
                    }
                            ${add}
                        </div>
                    </div>
                `
            })
            $('.designated_amount_echo').html(template)
            $('#designated_amount_echo').val(JSON.stringify(designated_amount_echo))
        }
        function infoSelectN(option, value) {
            if (option.elem == '#pMenu') {
                if (value == 3) {
                    $('.bd_type').show();
                } else {
                    $('.bd_type').hide();
                }
            }
        }

    </script>
</body>

</html>